<!--
 *
 * @Description:
 *
 * @Author: JZT.邓方舟
 * @Date: 2021-01-16 15:15:22
 * @Last Modified by: JZT.邓方舟
 * @Last Modified time: 2021-11-18 11:14:39
-->
<template>
    <div>
        <el-dialog title="" :visible.sync="dialogVisible" width="750px" :beforeClose="closeVideo" :destroy-on-close="true">
            <div v-if="isOpen">
                <video ref="video" width="100%" height="100%" :controls="true"  controlslist="nodownload nofullscreen noremoteplayback">
                    <source :src="videoUrl" :poster="picture" type="video/mp4" />
                    <!-- 您的浏览器不支持 video 标签。 -->
                </video>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    // import Hls from "hls";
    // import Vue from "vue";
    // Vue.use(Hls);
    // const Hls = require("hls.js");
    export default {
        props: {
            videoUrl: {
                type: String,
                default() {
                    return "";
                }
            },
            picture: {
                type: String,
                default() {
                    return "";
                }
            },
            isOpen: {
                type: Boolean,
                default() {
                    return false;
                }
            }
        },
        data() {
            return {
                dialogVisible: false,
                hls: ""
            };
        },
        watch: {
            isOpen(val) {
                this.dialogVisible = val;
                // if (val) {
                //     this.hls = new Hls();
                //     this.hls.loadSource(this.videoUrl);
                //     this.hls.attachMedia(this.$refs.video);
                //     this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                //         this.$refs.video.play();
                //     });
                // }
            }
        },
        beforeDestroy() {
            // this.videoPause();
        },
        methods: {
            // videoPause() {
            //     if (this.hls) {
            //         this.$refs.video.pause();
            //         this.hls.destroy();
            //         this.hls = null;
            //     }
            // },
            closeVideo() {
                this.dialogVisible = false;
                this.$emit("closeVideo");
            }
        }
    };
</script>
